<template>
  <div class="container">
    <el-container>
      <el-aside>
        <el-form :model="queryFormPT" ref="queryFormPT">
          <el-form-item>
            <el-input v-model="queryFormPT.keyword" autocomplete="off" placeholder="参数类型/名称">
              <el-button slot="append" icon="el-icon-search" @click="queryType()"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableDataPT"
          ref="tableDataPT"
          style="width: 100%;"
          size="small"
          border
          highlight-current-row
          @current-change="leftTableClick"
          :height="countHeight - 40 "
          v-loading="tableLoadingPT"
        >
          <el-table-column header-align="center" property="paName" label="参数类型" show-overflow-tooltip></el-table-column>
          <el-table-column header-align="center" property="paAlias" label="参数类型名称" show-overflow-tooltip></el-table-column>
        </el-table>
        <div style="margin: 10px auto;text-align: center">
          <el-button-group>
            <el-button v-if="isAuth('sys:param:add')" type="primary" size="small" icon="el-icon-plus" @click="addPT()">新增</el-button>
            <el-button v-if="isAuth('sys:param:edit')" type="primary" size="small" icon="el-icon-edit" @click="editPT()">编辑</el-button>
            <el-button v-if="isAuth('sys:param:del')" type="danger" size="small" icon="el-icon-delete" @click="delPT()">删除</el-button>
          </el-button-group>
        </div>
        <div style="margin: 10px auto">
          <el-pagination small layout="total, prev, pager, next" :current-page="pageIndexPT" :total="totalPagePT"></el-pagination>
        </div>
      </el-aside>
      <el-main style="margin-left: 20px;">
        <el-form :inline="true" :model="queryFormPV" ref="queryFormPV">
          <el-form-item>
            <el-input v-model="queryFormPV.keyword" size="small" placeholder="参数Key/描述" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" round @click="queryParam()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="isAuth('sys:param:add')" type="success" size="small" icon="el-icon-plus" @click="addPV()">新增</el-button>
            <el-button v-if="isAuth('sys:param:del')" type="danger" size="small" icon="el-icon-delete" @click="batchDelPV()">批量删除</el-button>
          </el-form-item>
          <el-form-item style="float: right">
            <span>参数类型：<span v-text="getTypeName"></span></span>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableDataPV"
          style="width: 100%;"
          border
          :height="countHeight"
          size="small"
          @selection-change="handleSelectionChange"
          v-loading="tableLoadingPV">
          <el-table-column header-align="center" type="selection" width="46" align="center"></el-table-column>
          <el-table-column header-align="center" property="paKey" label="参数键Key" show-overflow-tooltip></el-table-column>
          <el-table-column header-align="center" property="paDesc" label="参数描述" show-overflow-tooltip></el-table-column>
          <el-table-column header-align="center" property="paValue" label="参数值Value" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" property="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column header-align="center" align="center" fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="编辑" v-if="isAuth('sys:param:edit')" placement="top">
                <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row.paId)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" v-if="isAuth('sys:param:del') && scope.row.isSys === 0" placement="top">
                <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleDel(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          width="100%"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndexPV"
          :page-sizes="[20, 50, 100]"
          :page-size="pageSizePV"
          :total="totalPagePV"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-main>
    </el-container>
    <!-- 模态框 参数类型 新增/编辑 -->
    <dialog-param-type ref="dialogParamType" @refreshData="getDataListType"></dialog-param-type>
    <!-- 模态框 参数 新增/编辑 -->
    <dialog-param ref="dialogParam" @refreshData="getDataListParam"></dialog-param>
  </div>
</template>
<script>
  import paramTypeDialog from './dialog/paramTypeModule.vue'
  import paramDialog from './dialog/paramModule.vue'

  export default {
    name: 'zb-param',
    data () {
      return {
        queryFormPT: {keyword: ''},
        tableDataPT: [],
        pageIndexPT: 1,
        totalPagePT: 0,
        tableLoadingPT: false,

        queryFormPV: {keyword: ''},
        tableDataPV: [],
        pageIndexPV: 1,
        pageSizePV: 20,
        totalPagePV: 0,
        tableLoadingPV: false,
        multipleSelection: [],

        currentRow: null
      }
    },
    activated () {
      this.getDataListType()
    },
    computed: {
      countHeight() {
        return window.screen.availHeight - 342
      },
      getTypeName() {
        return this.currentRow ? this.currentRow.paAlias : ''
      }
    },
    methods: {
      getDataListType() {
        this.cleanTableLeft()
        this.tableLoadingPT = true
        const data = {
          'page': this.pageIndexPT,
          'limit': 10,
          'name': this.queryFormPT.keyword
        }
        this.$http({
          url: this.$http.adornUrl('/sys/param/type/list'),
          method: 'get',
          params: this.$http.adornParams(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.tableDataPT = result.data.dataList
            this.totalPagePT = result.data.totalCount
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.tableLoadingPT = false
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.tableLoadingPT = false
        })
      },
      getDataListParam() {
        if(!this.checkHasParamType()){
          return
        }
        this.cleanTableRight()
        this.tableLoadingPV = true
        const data = {
          'id': this.currentRow.paId,
          'page': this.pageIndexPV,
          'limit': this.pageSizePV,
          'keyword': this.queryFormPV.keyword
        }
        this.$http({
          url: this.$http.adornUrl('/sys/param/list'),
          method: 'get',
          params: this.$http.adornParams(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.tableDataPV = result.data.dataList
            this.totalPagePV = result.data.totalCount
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.tableLoadingPV = false
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.tableLoadingPV = false
        })
      },
      // 左侧类型表格点击事件
      leftTableClick(val) {
        if(!val){
          return
        }
        this.currentRow = val;
        this.getDataListParam()
      },
      // 添加 参数类型
      addPT() {
        const params = {type: 'add'}
        this.$nextTick(() => {
          this.$refs['dialogParamType'].init(params)
        })
      },
      // 修改 参数类型
      editPT() {
        if(!this.checkHasParamType()){
          return
        }
        const params = {type: 'edit', id: this.currentRow.paId}
        this.$nextTick(() => {
          this.$refs['dialogParamType'].init(params)
        })
      },
      // 删除 参数类型
      delPT() {
        if(!this.checkHasParamType()){
          return
        }
        if(this.currentRow.isSys === 1){
          this.$message({message: '系统参数类型不可删除！', type: 'error'})
          return
        }
        this.$confirm('是否删除参数类型[' + this.currentRow.paAlias + ']?', '提示', {type: 'warning'}).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/param/type/info/${this.currentRow.paId}`),
            method: 'delete'
          }).then(response => {
            const result = response.data
            if (result && result.code === 200) {
              this.getDataListType()
              this.$message({message: result.msg, type: 'success'})
            } else {
              this.$message({message: result.msg, type: 'error'})
            }
          })
        }).catch(() => {})
      },
      // 搜索 左侧表条件搜索 参数类型
      queryType() {
        this.pageIndexPT = 1
        this.getDataListType()
      },
      // 搜索 右侧表条件搜索 参数key/描述
      queryParam() {
        if(!this.checkHasParamType()){
          return
        }
        this.pageIndexPV = 1
        this.pageSizePV = 20
        this.getDataListParam()
      },
      // table多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 编辑 参数Key/Value
      handleEdit(id) {
        if(!this.checkHasParamType()){
          return
        }
        const params = {type: 'edit', id: id}
        this.$nextTick(() => {
          this.$refs['dialogParam'].init(params)
        })
      },
      // 删除 参数Key/Value
      handleDel(val) {
        if(val.isSys === 1){
          this.$message({message: '系统参数类型不可删除！', type: 'error'})
          return
        }
        this.$confirm('是否删除参数Key[' + val.paKey + '][' + val.paValue + ']?', '提示', {type: 'warning'}).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/param/info/${val.paId}`),
            method: 'delete'
          }).then(response => {
            const result = response.data
            if (result && result.code === 200) {
              this.$message({message: '删除参数' + result.msg, type: 'success'})
              this.getDataListParam()
            } else {
              this.$message({message: '删除参数' + result.msg, type: 'error'})
            }
          })
        }).catch(() => {})
      },
      // 新增 参数Key/Value
      addPV() {
        if(!this.checkHasParamType()){
          return
        }
        const params = {type: 'add', pid: this.currentRow.paId}
        this.$nextTick(() => {
          this.$refs['dialogParam'].init(params)
        })
      },
      // 批量删除 参数Key/Value
      batchDelPV(){
        const ids = []
        this.multipleSelection.forEach(function (item) {
          ids.push(item.paId)
        })
        if (ids.length === 0) {
          this.$message({message: '没有需要删除的参数!', type: 'info'})
          return
        }
        this.$http({
          url: this.$http.adornUrl('/sys/param/batch/del'),
          method: 'put',
          data: this.$http.adornData({'ids': ids},false)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.getDataListParam()
            this.$message({message: '批量删除' + result.msg, type: 'success'})
          } else {
            this.$message({message: '批量删除' + result.msg, type: 'error'})
          }
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
        })
      },
      handleSizeChange(val) {
        this.pageSizePV = val
        this.getDataListParam()
      },
      handleCurrentChange(val) {
        this.pageIndexPV = val
        this.getDataListParam()
      },
      checkHasParamType(){
        if(this.currentRow){
          return true
        } else {
          this.$message({message: '请选择一个参数类型！', type: 'info'})
          return false
        }
      },
      cleanTableLeft() {
        this.$refs['tableDataPT'].setCurrentRow()
        this.currentRow = null
        this.tableDataPT = []
        this.cleanTableRight()
      },
      cleanTableRight() {
        this.tableDataPV = []
        this.pageIndexPV = 1
        this.pageSizePV = 20
        this.totalPagePV = 0
        this.multipleSelection = []
      }
    },
    components: {
      'dialog-param-type': paramTypeDialog,
      'dialog-param': paramDialog
    }
  }
</script>
<style>
</style>
